<template>
  <el-drawer
    class="dia-style"
    :title="title"
    :visible.sync="open"
    :size="950"
    :close-on-click-modal="false"
    :wrapper-closable="false"
    append-to-body
    @close="cancel">
    <div class="drawer-container">
      <hk-form
        ref="formRef"
        class="hk-flex"
        :data="formData"
        :rules="rules"
        :label-width="labelWidth"
        :btn-hidden="btnHidden"
        :dict-list="dictList"
        :form-labels="formLabels">
        <template #filter-colloquyDuration>
          <el-input v-model="formData.colloquyDuration" placeholder="请输入谈话记录时间长度" maxlength="50">
            <el-button slot="append">小时</el-button>
          </el-input>
        </template>
        <template #filter-opUsers>
          <el-button icon="el-icon-thumb" style="margin-right: 1.25rem" @click="handleSelectData">请选择</el-button>
          <span v-if="!formData.opUsers.length && $route.query.showDetail">暂无数据</span>
          <hk-table
            v-if="formData.opUsers.length"
            :table-data="formData.opUsers"
            :table-columns="importTableList"
            :show-index="true"
            :total="total"
            :table-height="80"
            :show-pag="false" />
        </template>
        <template #filter-files>
          <div class="hk-flex-column">
            <hk-table
              :table-data="formData.files"
              :table-columns="tableDataList"
              :show-pag="false"
              :loading="loading"
              show-index
              :rules="rules"
              :dict-list="dictList"
              is-need-index
              operate>
              <template #prove="scope">
                <el-button type="text" class="block-button" @click="openUpload(scope.row.$index)">上传文件</el-button>
                <div v-if="!scope.row.row.fileName">
                  <span>支持扩展名：.pdf </span>
                </div>
                <el-link
                  v-else
                  type="primary"
                  target="_blank"
                  @click="downloadDoc(scope.row.row.fileUrl, scope.row.row.fileName)"
                  >{{ scope.row.row.fileName }}</el-link
                >
              </template>
              <template #operate="scope">
                <el-button size="mini" type="text" @click="handleDelete(scope.row.index)">删除</el-button>
              </template>
            </hk-table>
            <el-button icon="el-icon-plus" class="add-row" @click="addRow">增加行</el-button>
          </div>
        </template>
      </hk-form>

      <SelectDialog
        ref="selectRef"
        :table-columns="importTableList"
        :page-function="productList"
        title="选择参与运维人员"
        :check-data="formData.opUsers"
        is-multiple
        @handleSubmit="dialogSubmitEvent" />
      <hk-upload
        ref="import_dia"
        :url="url"
        title="上传文件"
        :accept="accept"
        hidden-list
        auto-submit
        @handleFile="handleFile"
        @submit="handleSubmit">
        <div v-if="fileList.length" class="file-list">
          <div>
            <i class="el-icon-document" />
            <span>{{ fileList[0].name }}</span>
          </div>
          <el-button type="text" @click="fileList.splice(0, 1)">删除</el-button>
        </div>
      </hk-upload>
    </div>
    <div class="drawer-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import HkForm from '@/components/Hk-Form'
import HkTable from '@/components/Hk-Table/index.vue'
import { add, update, details } from '@/api/specialProject/heartTalk'
import { pageList } from '@/api/specialProject/personnel'
import { upload } from '@/utils/request'
import { downloadDoc } from '../../utils'
import SelectDialog from '@/components/SelectDialog/index.vue'
export default {
  components: { HkForm, HkTable, SelectDialog },
  props: {
    title: {
      type: String,
      default: '新增',
    },
  },
  data() {
    return {
      fileList: [],
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: '120',
      // 是否显示按钮
      btnHidden: true,
      formData: {
        opUsers: [],
        files: [
          {
            materialName: '谈话记录表',
            notes: '谈话纪要',
          },
        ],
      },
      url: window.baseUrl.action + '/attachment/upload',
      accept: '.pdf',
      total: 0,
      loading: false,
      importProduct: [],
      importTableList: [
        { label: '人员名称', param: 'userName' },
        { label: '涉密等级', param: 'secLevel' },
        { label: '运维岗位', param: 'userPostName' },
      ],
      tableDataList: [
        { label: '材料名称', param: 'materialName', type: 'input', maxlength: 50 },
        { label: '说明', param: 'illustrate', type: 'input', maxlength: 50 },
        { label: '证明材料', param: 'prove', type: 'slot', width: 200 },
        { label: '备注', param: 'notes', type: 'input', maxlength: 50 },
      ],

      dictList: {},
      queryParams: {
        current: 1,
        size: 10,
      },
      formLabels: [
        {
          label: '谈话记录名称',
          field: 'colloquyName',
          type: 'input',
          maxlength: 100,
          span: 24,
        },
        {
          label: '谈话地点',
          field: 'colloquyLocation',
          type: 'input',
          maxlength: 100,
          span: 24,
        },
        {
          label: '谈话时间段',
          field: 'time',
          type: 'datetimerange',
          maxlength: 100,
          span: 24,
        },
        {
          label: '谈话时长',
          field: 'colloquyDuration',
          type: 'slot',
          maxlength: 50,
          span: 24,
        },

        {
          label: '谈话简介',
          field: 'colloquyDesc',
          type: 'textarea',
          hidden: false,
          attrs: {
            rows: '3',
          },
          maxlength: 200,
          span: 24,
        },
        {
          label: '参与运维人员',
          field: 'opUsers',
          type: 'slot',
          span: 24,
        },
        {
          label: '相关材料',
          field: 'files',
          type: 'slot',
          span: 24,
        },
      ],
      // 表单校验
      rules: {
        colloquyName: [{ required: true, message: '谈话名称不能为空', trigger: 'blur' }],
        colloquyLocation: [{ required: true, message: '谈话地点不能为空', trigger: 'blur' }],
        time: [{ required: true, message: '谈话时间段不能为空', trigger: 'blur' }],
        colloquyDuration: [
          { required: true, message: '谈话时长不能为空', trigger: 'blur' },
          { pattern: /^(\d|[1-9]\d+)(\.\d+)?$/, message: '只能是数字', trigger: 'blur' },
        ],
        opUsers: [{ required: true, message: '参与运维人员不能为空', trigger: 'change' }],
        files: [{ required: true, message: '请补全相关材料', trigger: 'change' }],
      },
    }
  },

  mounted() {},
  methods: {
    downloadDoc(url, name) {
      downloadDoc(url, name)
    },
    handleSelectData() {
      this.$refs.selectRef.show(this.formData.opUsers)
    },
    productList(queryParams) {
      return pageList(queryParams)
    },
    dialogSubmitEvent(data) {
      this.formData.opUsers = data
    },
    openUpload(index) {
      this.tableIndex = index
      this.fileList = []
      this.$refs.import_dia.show()
    },
    handleFile(file) {
      if (Object.keys(file)) {
        this.fileList = [file]
      }
    },
    handleSubmit() {
      const form = new FormData()
      this.fileList.forEach((item, key) => {
        form.append('file', item.raw)
      })

      upload(this.url, form)
        .then((res) => {
          // this.$message.success('上传成功')
          this.$refs.import_dia.cancel()
          this.$set(this.formData.files[this.tableIndex], 'fileName', res[0].name)
          this.$set(this.formData.files[this.tableIndex], 'fileUrl', res[0].url)
          this.fileList = []
        })
        .catch((err) => {
          this.fileList = []
          console.log(err)
        })
    },
    addRow() {
      this.formData.files.push({})
    },
    handleDelete(idx) {
      this.formData.files.splice(idx, 1)
    },
    submitForm() {
      const isFull = this.formData.files.every((i) => i.materialName && i.fileName && i.fileUrl)
      if (!isFull) {
        this.$message.error('请补全相关材料')
        return
      }
      this.$refs.formRef.handleFormSubmit('formLabels').then((res) => {
        res.startTime = res.time[0]
        res.endTime = res.time[1]
        res.opUserIds = this.formData.opUsers.map((i) => i.id)
        if (res.id) {
          update(res).then(() => {
            this.$message.success('修改成功')
            this.$emit('handleSubmit')
            this.cancel()
          })
        } else {
          add(res).then(() => {
            this.$message.success('新增成功')
            this.$emit('handleSubmit')
            this.cancel()
          })
        }
      })
    },

    show(data) {
      this.open = true
      if (data) {
        details(data).then((res) => {
          this.formData = res
          res.time = [res.startTime, res.endTime]
        })
      } else {
        this.formData = {
          opUsers: [],
          files: [
            {
              materialName: '谈话记录表',
              notes: '谈话纪要',
            },
          ],
        }
      }
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.formData = {
        opUsers: [],
        files: [],
      }
      this.$refs.formRef.resetForm('formLabels')
    },
  },
}
</script>

<style lang="scss" scoped>
#app.dark-theme {
  .drawer-container,
  .hk-flex {
    background: transparent !important;
    // border: .0625rem solid rgba(59, 139, 255, 0.4);
  }
  .drawer-footer {
    background: transparent !important;
    // border: .0625rem solid rgba(59, 139, 255, 0.4);
  }
}

.dark-theme {
  span {
    color: #fff !important;
  }
}
.sub-title {
  height: 1.25rem;
  border-left: 0.125rem solid #4b6eef;
  margin-bottom: 1.375rem;

  span {
    margin-left: 0.5rem;
  }
}
.block-button {
  display: block;
  padding: 0;
  text-align: left;
}
.ml10 {
  margin-left: 0.625rem;
}

.mt40 {
  margin-top: 2.5rem;
}
.hk-flex-column {
  margin-top: 20px;
  margin-left: -120px;
}
.drawer-container {
  padding: 0;
}
.add-row {
  margin-top: 20px;
}
.file-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#app ~ .el-dialog__wrapper {
  .el-upload-list {
    display: none;
  }
}
::v-deep .el-tooltip__popper {
  max-width: 20% !important;
}
</style>

